<template>
  <el-dialog :title="this.dataForm.type == 0 ? '今日预离' : '占用房间'" :close-on-click-modal="false" :visible.sync="visible" v-if="visible" width="60%">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item v-if="this.dataForm.type == 1">
        <el-select v-model="dataForm.state" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.key" placeholder="房号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">{{ $t('Common.Query') }}</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
      <el-table-column prop="roomNum" header-align="center" align="center" label="房号">
        <template slot-scope="scope">
          <span v-if="scope.row.roomNum">{{ scope.row.roomSign }}{{ scope.row.roomNum }}</span>          
          <span v-else>未分配</span>
        </template>
      </el-table-column>
      <el-table-column prop="sysNo" header-align="center" align="center" label="单号">
        <template slot-scope="scope">
          <span style="color: #17B3A3;cursor: pointer;" v-if="scope.row.isSingle == 4" @click="toAccounting({ singleId: scope.row.reserSingleId }, '1')">
            {{scope.row.sysNo}}
          </span>
          <span style="color: #17B3A3;cursor: pointer;" v-else-if="scope.row.isSingle == 1" @click="toAccounting({ singleId: scope.row.singleId }, '1')">
            {{scope.row.sysNo}}
          </span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="peopleName" header-align="center" align="center" label="客人姓名">
        <template slot-scope="scope">
          <span v-if="scope.row.peopleName">{{scope.row.peopleName}}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="roomName" header-align="center" align="center" label="房间类型"></el-table-column>
      <el-table-column header-align="center" align="center" label="状态" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.isSingle == 1">在住房</span>
          <span v-else-if="scope.row.isSingle == 4">预订房</span>
          <span v-else>
            <span v-if="scope.row.type == 4">维修房</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="typeStartTime" header-align="center" align="center" label="入住时间">
      </el-table-column>
      <el-table-column prop="typeStopTime" header-align="center" align="center" label="预离时间">
      </el-table-column>
    </el-table>
<!--    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
    </el-pagination> -->
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        dataForm: {
          key: '',
          state: 0,
          //0今日预离  1今日在住
          type: 0,
          roomId: 0,
          notToday: 1,
          date:''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        visible: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        options: [{
          value: 0,
          label: '全部'
        }, {
          value: 1,
          label: '在住'
        }, {
          value: 2,
          label: '预定'
        }, {
          value: 3,
          label: '维修'
        }],
      }
    },
    components: {

    },
    methods: {
      toAccounting(item, type) {
        this.visible = false;
        //将数据存储到本地
        var p = {
          singleId: item.singleId,
          type: type
        };
        this.$cookie.set('accounting', JSON.stringify(p));
        this.$router.push({
          name: 'accounting'
        });
      },
      init(type,roomId,notToday,date){
        this.visible = true;
        this.dataForm.type = type;
        this.dataForm.roomId = roomId;
        this.dataForm.notToday = notToday;
        this.dataForm.date = date;
        this.$nextTick(()=>{
          this.getDataList()
        })
      },
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/hotel/hotelRoomForcasting/floorList'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            ...this.dataForm
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.dataList = data.records
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val
      }
    }
  }
</script>
